<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

    <style>
        body {
            -webkit-font-smoothing: antialiased;
            background-color: #333333;
            color: #CCCCCC;
            font: 15px/22.5px "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
        }

        h2 {
            text-align: center
        }

        h3 {
            text-align: center
        }

        table {
            margin: auto
        }

        tr {
            width:150px;
            text-align:center;
            padding:5px
        }

        th {
            font-weight: bold;
            width:150px;
            text-align:center;
            padding:5px
        }

        .updated {
            color: #dad55e;
            font-weight: bold;
        }
    </style>

    <script type="text/javascript">
        const loanTypes = ["SHORT", "SHORT-MID", "MID-LONG", "LONG"];
        let idx = 0;

        function runIqTables() {
            updateKeyTableWithList("http://localhost:7076/loan-app-iq/");
        }

        function updateKeyTableWithList(path) {
            let loanType = loanTypes[idx];
            idx += 1;
            if (idx >= loanTypes.length) idx = 0;
            $.getJSON(path + loanType, function (response) {
                updateKeyTable(response, $('#keyTable'), loanType )
            })
        }


        function updateKeyTable(response, table, loanType) {
            let errDiv = $('#errorDiv')
            errDiv.hide()
            if (!response.errorMessage) {
                $('.keyRow').removeClass('updated');
                let key = loanType;
                let row = $("tr[id='" + key + "_key']");
                if (row.length) {
                    $("td[id='" + key + "_td_appamnt']").text(parseFloat(response.result.totalLoans).toLocaleString("en-US"))
                    $("td[id='" + key + "_td_rejamnt']").text(parseFloat(response.result.totalRejected).toLocaleString("en-US"))
                    $("td[id='" + key + "_td_appcnt']").text(response.result.numApproved)
                    $("td[id='" + key + "_td_rejcnt']").text(response.result.numRejected)
                    $("td[id='" + key + "_status']").text(response.hostType)
                } else {
                    row = $('<tr id="' + key + '_key" class="keyRow">')
                    row.append($('<td>' + key + '</td><td id="' + key + '_td_appamnt">' + parseFloat(response.result.totalLoans).toLocaleString("en-US") + '</td>'))
                    row.append($('<td id="' + key + '_td_rejamnt">' + parseFloat(response.result.totalRejected).toLocaleString("en-US") + '</td>'))
                    row.append($('<td id="' + key + '_td_appcnt">' + response.result.numApproved.toLocaleString("en-US") + '</td>'))
                    row.append($('<td id="' + key + '_td_rejcnt">' + response.result.numRejected.toLocaleString("en-US") + '</td>'))
                    row.append($('<td id="' + key + '_status">' + response.hostType + '</td>'))
                    table.append(row);
                }
                row.addClass('updated')
            } else {
                $('#errorMessage').text(response.errorMessage)
                errDiv.show()
            }
        }

        setInterval(runIqTables, 1000);
    </script>

</head>

<body>

<h2>Kafka Streams IQ Loan Application Dashboard</h2>

<div id="errorDiv" style="display: none">
    <h2 id="errorMessage"></h2>
</div>

<div id="keyDiv">
    <h3 id="keyHeader">Total Loan Transactions Summary</h3>
    <table id="keyTable">
        <tr>
            <th>Loan Type</th>
            <th>Total Amount Approved</th>
            <th>Total Amount Rejected</th>
            <th>Approved Count</th>
            <th>Rejected Count</th>
            <th>Host Status</th>
        </tr>
    </table>
</div>


</body>
</html>